<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('鉴定样本列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>

                        <input type="hidden" id="registerId" name="registerId" th:value="*{registerId}"/>

                        <li>
                            <label>送鉴单位：</label>
                            <input type="text"  name="params[sendUnit]"/>
                        </li>
                        <li>
                            <label>来文文号：</label>
                            <input type="text"  name="params[documentNum]"/>
                        </li>
                        <li>
                            <label>样本名称：</label>
                            <input type="text" name="sampleName"/>
                        </li>

                        <li>
                            <label>样本ID：</label>
                            <input type="text" name="sampleCode"/>
                        </li>
                        <li>
                            <label>样本类别：</label>
                           <!-- <select name="sampleType" class=" noselect2 selectpicker" th:with="type=${@dict.getType('re_review_scope')}" data-none-selected-text="请选择审读范围" >
                                <option value="">所有</option>

                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>-->
                            <select name="sampleType" th:with="type=${@dict.getType('id_sample_type')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label>出版单位：</label>
                            <input type="text"  name="publishingUnit"/>
                        </li>
                        <li>
                            <label>鉴定状态：</label>
                            <select name="status">
                                <option value="">所有</option>
                                <option value="0">未鉴定</option>
                                <option value="1">鉴定中</option>
                                <option value="2">已鉴定</option>
                            </select>
                        </li>
<!--                        <li>-->
<!--                            <label>审批状态：</label>-->
<!--                            <select name="params[auditStatus]">-->
<!--                                <option value="">所有</option>-->
<!--                                <option value="3">待审核</option>-->
<!--                                <option value="5">通过</option>-->
<!--                                <option value="1">未通过</option>-->
<!--                            </select>-->
<!--                        </li>-->
                        <li class="select-time">
                            <label>录入日期：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
<!--            <a class="btn btn-success" onclick="addTabAndRegisterId()" shiro:hasPermission="publish:identsample:add">-->
<!--                <i class="fa fa-plus"></i> 添加-->
<!--            </a>-->
<!--            <a class="btn btn-primary single disabled" onclick="$.operate.editTab()" shiro:hasPermission="publish:identsample:edit">-->
<!--                <i class="fa fa-edit"></i> 修改-->
<!--            </a>-->
<!--            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="publish:identsample:remove">-->
<!--                <i class="fa fa-remove"></i> 删除-->
<!--            </a>-->
            <a class="btn btn-warning" onclick="$.table.exportExcelRecord('formId')" >
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-print" />
<th:block th:include="include :: html2canvas" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('publish:identsample:edit')}]];
    var removeFlag = "";
    var prefix = ctx + "publish/identsample";



    $(function() {
        var options = {
            url: prefix + "/listSampRegs",
            createUrl: prefix + "/add/{registerId}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            detailUrl: prefix + "/detail/{id}",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "鉴定样本",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '编号',
                    visible: false
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'sampleName',
                    title: '样本名称',
                    sortable: true,

                },
                {
                    field: 'idAcceptRegister.sendUnit',
                    title: '送鉴单位',

                },
                {
                    field: 'idAcceptRegister.documentNum',
                    title: '来文文号',

                },

                {
                    field: 'sampleCode',
                    title: '样本ID',
                    sortable: true,
                },


                {
                    field: 'createTime',
                    title: '样本录入日期',
                    sortable: true,
                },
                {
                    field: 'sampleType',
                    title: '样本类别',
                    sortable: true,
                },

                {
                    field: 'takeoverUser',
                    title: '创建人',
                    sortable: true,
                },
             /*   {
                    field: 'by1',
                    title: '鉴定状态',
                    formatter: function (value, row, index) {
                        var text = '';
                        if(value==""||value==null){
                            text ="未鉴定";
                        }else {
                            text ="已鉴定"
                        }
                        return text;
                    },
                    sortable: true,
                },*/
                {
                    field: 'status',
                    title: '鉴定状态',
                    formatter: function (value, row, index) {
                        var text = '';
                        if(value=='0'||value==null){
                            text ="未鉴定";
                        }
                        else if (value=='1'){
                            text ="鉴定中";
                        }else if (value=='2') {
                            text ="已鉴定"
                        }
                        return text;
                    },
                    sortable: true,
                },
                {
                    field: 'isUse',
                    title: '是否启用',
                    formatter: function (value, row, index) {
                        return statusTools(row);
                    },
                    sortable: true,
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="qrCode(\'' + row.id + '\',\'' + row.sampleCode + '\')"><i class="fa fa-qrcode"></i>二维码</a> ');
                        // if ($.common.isEmpty(row.by1)){
                         if ($.common.isEmpty(row.by1)||row.status=='0'||row.status=='1'){
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        }
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '\')"><i class="fa fa-book"></i>查看</a> ');
                        /*actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');*/
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    /* 用户状态显示 */
    function statusTools(row) {
        if (row.isUse == '0') {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
        }
    }

    /* 是否启用-关闭 */
    function disable(id) {
        $.modal.confirm("确认要关闭吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "id": id, "isUse": '0' });
        })
    }

    /* 是否启用-开启 */
    function enable(id) {
        $.modal.confirm("确认要开启吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "id": id, "isUse": '1' });
        })
    }
    // 添加信息，以tab页展现
    function addTabAndRegisterId() {
        table.set();
        var id=$("#registerId").val();
        $.modal.openTab("添加" + table.options.modalName, addUrlAndRegisterId(id));
    }

    function addUrlAndRegisterId(id) {
        var url = $.common.isEmpty(id) ? table.options.createUrl.replace("{registerId}", "") : table.options.createUrl.replace("{registerId}", id);
        return url;
    }

    function downloadIamge(imgsrc, name) {//下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }

    /* 审核 */
    function qrCode(id,sampleCode) {
        open (sampleCode, prefix + "/qrCode?id="+id, 400, 450, null);
    }

    // 弹出层指定宽度
    function open(title, url, width, height, callback) {
        var html = "<div style='margin:0px;padding-top: 5px' id='detailsinfo'>" +
            "<div class='text-center'> " +
            "<h1 style='margin:0px;'>重庆市新闻出版物监测中心</h1>"+
            "<img src='"+url+"'>" +
            "<h1 style='margin: 0px'>样本ID:"+title+"</h1>"
            +"</div></div>"
        layer.open({
            type: 1,
            title: '二维码',
            area: [width + 'px', height + 'px'],
            fix: false,
            shadeClose: true,
            shade: false,
            content: html,
            btn: ['下载','打印'],
            yes: function (){
                // downloadIamge(url,title);
                downloadForJS(title);
            },
            success: function(layero){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn1').attr('onclick','').click( eval(function(){
                    // $.print("#ele2");

                    $("#detailsinfo").print({

                        globalStyles:true,//是否包含父文档的样式，默认为true

                        mediaPrint:false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false

                        stylesheet:null,//外部样式表的URL地址，默认为null

                        noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"

                        iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true

                        append:null,//将内容添加到打印内容的后面

                        prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容

                        deferred: $.Deferred()//回调函数

                    });

                }));
            },
            cancel: function(index) {
                return true;
            }
        });

        /* layer.open({
             type: 2,
             area: [width + 'px', height + 'px'],
             fix: false,
             //不固定
             maxmin: true,
             shade: 0.3,
             title: title,
             content:html,
             btn: ['下载', '关闭'],
             // 弹层外区域关闭
             shadeClose: true,
             yes: function (){
                 downloadIamge(url,"二维码");
             },
             cancel: function(index) {
                 return true;
             }
         });*/
    }


    function  downloadForJS(fileName) {
        // var targetDom = this.common.getClass('div', 'rightBox')[0]
        // var copyDom = targetDom.cloneNode(true) // 克隆节点
        // copyDom.style.width = targetDom.offsetWidth + 'px'
        // copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度
        // document.getElementsByClassName('detailsinfo')
        html2canvas(document.getElementById('detailsinfo')).then((canvas) => {
            // document.getElementsByClassName('detailsinfo')[0].removeChild(copyDom) // 删除节点
            var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url
            var saveLink = document.createElement('a');
            saveLink.href = imgUri
            saveLink.download = '样本'+fileName+'.png'
            saveLink.click()
        })
    }


</script>
</body>

<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                <!--                <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据-->
                &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>
